<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        name="viewport">
  <meta content="ie=edge" http-equiv="X-UA-Compatible">
  <title>合成图像-刮刮卡效果</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }

      .ggk {
          width: 700px;
          height: 300px;
          font-size: 30px;
          color: red;
          text-align: center;
          line-height: 300px;
          user-select: none;
          /*background-color: pink;*/

          position: absolute;
          top: 0;
          left: 0;
      }

      #canvas {
          /*background-color: aliceblue;*/
          position: relative;
          z-index: 10;
      }
  </style>
</head>
<body>
<!--canvas-->
<canvas height="300" id="canvas" width="700"></canvas>
<div class="ggk">谢谢惠顾</div>

</body>
<script>
  // 1. 获取canvas元素
  const canvas = document.getElementById('canvas');
  // 2. 获取上下文
  const ctx = canvas.getContext('2d');

  let img = new Image()
  img.src = '../img/gua.png'

  img.onload = function () {
    // 3. 绘制图像
    ctx.drawImage(img, 0, 0, 700, 300)
  }
  let isMouseDown = false
  canvas.onmousedown = function () {
    isMouseDown = true
  }
  canvas.onmouseup = function () {
    isMouseDown = false
  }
  canvas.onmousemove = function (e) {
    if (isMouseDown) {
      //   获取鼠标的坐标
      let x = e.offsetX
      let y = e.offsetY

      ctx.globalCompositeOperation = 'destination-out'
      ctx.beginPath()
      ctx.arc(x, y, 20, 0, Math.PI * 2)
      ctx.fill()
      ctx.closePath()
    }
  }
  //   生成随机数
  let random = Math.random()
  if (random < 0.5) {
    document.querySelector('.ggk').innerText = '恭喜中奖 奖品是IPone14 Pro Max'
  }

</script>
</html>